<template>
  <div class="person">
    <div class="person_main">
      <h2>{{ person.user.nickname }}</h2>
      <p>{{ person.user.describe }}</p>
      <div class="person_foot">
        <div>
          <span @click="userStore.isShowWechat">
            <svg class="icon weixin" aria-hidden="true">
              <use xlink:href="#icon-weixin"></use>
            </svg>
          </span>
          <span @click="userStore.goGitee">
            <svg class="icon gitee" aria-hidden="true">
              <use xlink:href="#icon-gitee"></use>
            </svg>
          </span>
        </div>
        <ul>
          <li>
            <span>{{ person.article }}</span>
            <span>文章</span>
          </li>
          <li>
            <span>{{ person.message }}</span>
            <span>说说</span>
          </li>
          <li>
            <span>{{ person.labels }}</span>
            <span>标签</span>
          </li>
          <li>
            <span>{{ person.word }}</span>
            <span>留言</span>
          </li>
        </ul>
      </div>
    </div>
    <el-avatar
      v-if="person.user.avatar"
      :src="person.user.avatar"
      :size="100"
      class="person_avatar"
    />
    <el-avatar
      v-else
      :style="`background:${localCache.getCache('avatar-default-color')}`"
      :size="100"
      class="person_avatar"
    >
      {{ person.user.nickname ? person.user.nickname.substring(0, 1) : '' }}
    </el-avatar>
  </div>
</template>

<script setup>
  import { onBeforeMount, reactive } from 'vue'
  import { queryAuthorRequest } from '@/network/api/user'
  import { localCache } from '@/utils/cache'
  import useUserStore from '@/store/userStore'

  const userStore = useUserStore()
  const person = reactive({
    article: null,
    message: null,
    labels: null,
    word: null,
    user: {},
  })
  onBeforeMount(async () => {
    const result = await queryAuthorRequest()
    person.article = result.result.article
    person.message = result.result.message
    person.labels = result.result.labels
    person.word = result.result.word
    person.user = result.result.user
  })
</script>

<style lang="less" scoped>
  .person {
    position: relative;
    width: 100%;
    height: 448px;
    background: linear-gradient(
      130deg,
      rgb(36, 198, 220),
      rgb(84, 51, 255) 41.07%,
      rgb(255, 0, 153) 76.05%
    );
    border-radius: 16px;
    .person_main {
      position: absolute;
      top: 8%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: calc(100% - 8px);
      height: calc(92% - 8px);
      margin: 4px;
      background: var(--background-primary);
      border-radius: 12px;
      opacity: 0.9;
      h2 {
        color: var(--text-bright);
        font-size: 36px;
      }
      p {
        font-size: 16px;
      }
      .person_foot {
        width: 100%;
        div {
          margin: 12px 0;
          text-align: center;
          span {
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            &:hover {
              opacity: 0.6;
            }
            &:nth-child(1) {
              margin-right: 18px;
            }
          }
        }
        ul {
          display: flex;
          justify-content: center;
          width: 100%;
          li {
            display: flex;
            width: 30%;
            height: 56px;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            span {
              &:nth-of-type(1) {
                color: var(--text-bright);
                font-weight: 700;
                font-size: 16px;
              }
              &:nth-of-type(2) {
                color: var(--text-normal);
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .person_avatar {
      position: absolute;
      top: 5px;
      left: 50%;
      transform: translateX(-50%);
      border: 5px solid var(--background-primary);
      z-index: 1;
    }
  }
</style>
